<!DOCTYPE html>
<html>

<style>
	.checkout-steps {
		background-color: #fff;
		padding: 20px 20px;
		border: 1px solid #f0f0f0;
	}
</style>

<body class="bgf6">

<div th:include="common/bookTop :: commonTop"></div>
	
	<div class="main-body pb100" id="app">
		<div class="container pt10">

				<!--			面包屑-->
			<div class="bread-nav bgff">

			</div>
			<br>


<!--			结算页内容-->
			<div class="checkout-steps">
				<el-tag type="success">收货人信息</el-tag>
				<div style="float: right">
					<el-link type="primary" @click="dialogFormVisible=true">新增收货地址</el-link>
				</div>

				<div style="margin: 10px 10px">

                    <div v-for="addr in myAddresses">
                        <el-row>
                            <el-col :span="5">
                                <div class="grid-content">
                                    <el-radio :label="addr.id" v-model="selAddress">
                                        {{addr.realName}}
                                    </el-radio>
                                </div>
                            </el-col>
                            <el-col :span="10">
                                <div class="grid-content">
                                    {{addr.province}}{{addr.city}}{{addr.area}}{{addr.detailAddr}}
                                </div>
                            </el-col>
                            <el-col :span="7">
                                <div class="grid-content">
                                    {{addr.phone}}
                                </div>
                            </el-col>
                            <el-col :span="2">
                                <div class="grid-content">
                                    <el-link type="success">编辑</el-link>
                                </div>
                            </el-col>
                        </el-row>
                    </div>




					<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
						<el-form :model="form">
							<el-form-item label="省份" :label-width="formLabelWidth">
								<el-select v-model="address.selPrivinceId" placeholder="请选择省份" @change="loadAreas(2, $event)">
									<el-option :label="privince.areaname" :value="privince.areaid" v-for="privince in form.privinces"></el-option>
								</el-select>
							</el-form-item>

							<el-form-item label="市区" :label-width="formLabelWidth">
								<el-select v-model="address.selCityId" placeholder="请选择市区" @change="loadAreas(3, $event)">
									<el-option :label="city.areaname" :value="city.areaid" v-for="city in form.citys"></el-option>
								</el-select>
							</el-form-item>

							<el-form-item label="县/区" :label-width="formLabelWidth">
								<el-select v-model="address.selXianId" placeholder="请选择县/区">
									<el-option :label="xian.areaname" :value="xian.areaid" v-for="xian in form.xians"></el-option>
								</el-select>
							</el-form-item>

							<el-input v-model="address.addressDetail" placeholder="详细地址"></el-input>
							<el-input v-model="address.realName" placeholder="收货人姓名"></el-input>
							<el-input v-model="address.phone" placeholder="手机"></el-input>
							<el-radio-group v-model="address.defualtAddress">
								<el-radio label="1">默认</el-radio>
								<el-radio label="0">否</el-radio>
							</el-radio-group>


						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="dialogFormVisible = false">取 消</el-button>
							<el-button type="primary" @click="addAddress">确 定</el-button>
						</div>
					</el-dialog>

				</div>


				<el-divider content-position="left"></el-divider>

<!--				支付方式-->
				<div>
					<el-tag type="success">支付方式</el-tag>
					<div style="margin: 10px 10px">
						<el-row>
							<el-col :span="8">
								<div class="grid-content">
									<el-radio-group v-model="payChannel">
										<el-radio :label="1">
											<img src="/img/alipay.png">
										</el-radio>
										<el-radio :label="2">
											<span>ATM</span>
										</el-radio>
									</el-radio-group>
								</div>
							</el-col>
							<el-col :span="16">
								<div class="grid-content">
								</div>
							</el-col>
						</el-row>
					</div>
				</div>


				<el-divider content-position="left"></el-divider>

				<!--				送货清单-->
				<div>
					<el-tag type="success">送货清单</el-tag>
					<div style="margin: 10px 10px">
						<el-table
								:stripe="isStripe"
								ref="multipleTable"
								:data="settlements"
								tooltip-effect="dark"
								style="width: 100%">

							<el-table-column
									label="商品"
									width="240">
								<template slot-scope="scope">
									<el-row>
										<el-col :span="12">
											<div class="grid-content">
												<img :src="scope.row.pictureUrl" style="width: 60px; height: 60px">
											</div>
										</el-col>
										<el-col :span="12">
											<div class="grid-content">
												{{scope.row.commodityName}}
											</div>
										</el-col>
									</el-row>
								</template>

							</el-table-column>
							<el-table-column
									prop="price"
									label="单价"
									width="120">
							</el-table-column>
							<el-table-column
									label="数量"
									show-overflow-tooltip>
								<template slot-scope="scope">
									<el-row>
										<el-col :span="24">
											<div class="grid-content">
												{{scope.row.buyNum}}
											</div>
										</el-col>
									</el-row>

								</template>
							</el-table-column>
							<el-table-column
									label="小计"
									show-overflow-tooltip>
								<template slot-scope="scope">
									{{mul(scope.row.buyNum, scope.row.price)}}
								</template>

							</el-table-column>
						</el-table>
					</div>

				</div>


			</div>



			<el-divider content-position="left"></el-divider>

			<el-row>
				<el-col :span="24">
					<div class="grid-content bg-purple-dark">
						<div style="float: right;margin-right: 20px">
							寄送至：江苏xxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxx xxx
							<br>
							应付总金额：0￥
						</div>
					</div>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="24">
					<div class="grid-content">
						<div style="float: right;margin-right: 20px">
							<el-button type="danger" @click="createOrder">提交订单</el-button>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>

<div id="alipayFormDiv"></div>

<script type="text/javascript">

	var app = new Vue({
		el : '#app',
		data : {
			settlements : [],
		    myAddresses : [],
			isStripe : true,
			cards : [],
			payChannel : 1,
			selAddress : 1,
			dialogFormVisible: false,

			form: {
				privinces : [],
				citys : [],
				xians : []
			},

			address : {
				selPrivinceId : 0,
				selCityId : '',
				selXianId : '',

				addressDetail : '',
				realName : '',
				phone : '',
				defualtAddress : true
			},
			formLabelWidth: '120px'
		},
		created : function() {
			//加载省份
			this.loadAreas(1, -1);
            //加载收货地址
            this.loadAddress();
            //加载清单
            this.loadSettlement();
		},
		computed: {

		},
		methods : {
			createOrder : function() {
				let that = this;
				axios.get('/order/createOrder?addressId=' + that.selAddress + '&payChannel=' + that.payChannel)
					.then(function (response) {
						if (response.data.code != 1000) {
							alert(response.data.message);
							return;
						}
						let alipayFormHtml = response.data.data;
						alert(alipayFormHtml);
						//将alipay form表单通过innerHTML让浏览器渲染
						document.getElementById('alipayFormDiv').innerHTML = alipayFormHtml;
						//最后通过js自动的提交支付表单
						document.getElementById('alipayFormDiv').querySelector('form').submit();
					});
			},
			loadSettlement:function() {
				let that = this;
				axios.post('/order/loadSettlement')
						.then(function (response) {
							that.settlements = response.data.data;
						});
			},
		    loadAddress : function() {
                let that = this;
                axios.post('/address/listAddress')
                    .then(function (response) {
                        that.myAddresses = response.data.data;
                        //找到默认地址 赋值
                        for (let i=0; i<that.myAddresses.length; i++) {
                            let address = that.myAddresses[i];
                            if (address.defaultAddr == 1) {
                                that.selAddress = address.id;
                            }
                        }
                    });
            },
			addAddress : function() {
				let that = this;
				axios.post('/address/addAddress', this.address)
						.then(function (response) {
							alert('添加成功');
							that.dialogFormVisible = false;
						});
			},
			loadAreas : function (level, parentId) {
				let that = this;
				axios.get('/address/loadArea?level=' + level + '&parentId=' + parentId)
				.then(function (response) {
					if (level == 1) {
						that.form.privinces = response.data.data;
					} else if(level == 2) {
						that.form.citys = response.data.data;
					} else if (level == 3) {
						that.form.xians = response.data.data;
					}
				});
			},
			mul : function (num1, num2) {
				const num1String = num1.toString()
				const num2String = num2.toString()
				const num1Digits = (num1String.split('.')[1] || '').length
				const num2Digits = (num2String.split('.')[1] || '').length
				const baseNum =  Math.pow(10, num1Digits + num2Digits)
				return Number(num1String.replace('.', '')) * Number(num2String.replace('.', '')) / baseNum
			}
		}
	});

</script>
</body>
</html>
